<!doctype html>
<html lang="en">
  <head>
    <!-- lang="en" 用于进网页之后的解析中英文 -->
    <meta charset="utf-8">
    <!--移动端优先的适配 配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS 引入 -->
    <link rel="stylesheet" href="bootstrap.css">

    <title>Hello, world!</title>
  </head>
  <body>
  	<!--from 表单也有自己的一套标签 from-group 与 form-control 是两组常用标签-->
    <form>
    	<!--form-group 格式组件-->
    	<div class="form-group">
    		<!--label用于当鼠标点击label时触发-->
    		<label for="exampleInputEmail">Email address</label>
    		<input type="email" class="form-control" id="exampleInputEmail" placeholder="Email" />
    	</div>
    	<div class="form-group">
    		 <label for="examplePassword">Password</label>
    		 <input type="password" class="form-control" id="examplePassword" placeholder="Password"/>
    	</div>
    	<div class="form-group">
    		<label for="exampleInputFile">File input</label>
    		<input type="file" id="exampleInputFile"/>
    		<p class="help-block">
    			 	我是一条浅灰色的帮助语句
    		</p>
    	</div>
    	<div class="checkbox">
    		<label>
    			<input type="checkbox"/>check me out
    		</label>
    	</div>
    	<button type="submit" class="btn btn-default">
    		Submit
    	</button>
    </form>
    <!--行级标签可以显示在一行之内-->
		<form class="form-inline">
		  <div class="form-group">
		    <label for="exampleInputName2">Name</label>
		    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputEmail2">Email</label>
		    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
		  </div>
		  <button type="submit" class="btn btn-default">Send invitation</button>
		</form>
    
    <!--输入框文本-->
    <input type="text" class="form-control" placeholder="text"/>
    <!--所有输入形式标签需要放在label标签内 屏幕阅读器方可正确识别-->
    <label><input type="text" class="form-control" placeholder="text"/></label>
		<!--以下展现label的属性为sr-only时label标签内容会不显示-->
		<form class="form-inline">
		  <div class="form-group">
		    <label class="sr-only" for="exampleInputEmail3">Email address</label>
		    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
		  </div>
		  <div class="form-group">
		    <label class="sr-only" for="exampleInputPassword3">Password</label>
		    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
		  </div>
		  <div class="checkbox">
		    <label>
		      <input type="checkbox"> Remember me
		    </label>
		  </div>
		  <button type="submit" class="btn btn-default">Sign in</button>
		</form>
    
    <br><br>
		<!--文本域 初始高度(显示高度为row值) 可以实现上下拉框，如果文本多的话-->   
		<textarea class="form-control" rows="3"></textarea>
		
		<!--输入框文本前后加图标按钮是式-->
		<form class="form-inline">
		  <div class="form-group">
		    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
		    <div class="input-group">
		      <div class="input-group-addon">$</div>
		      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
		      <div class="input-group-addon">.00</div>
		    </div>
		  </div>
		  <button type="submit" class="btn btn-primary">Transfer cash</button>
		</form>
			
		<!--设置水平排列标签-->
		<form class="form-horizontal">
		  <div class="form-group">
		  	<!--分配格数 为 2 和 10--><!--control-label实现局部右对齐-->
		    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
		    <div class="col-sm-10">
		      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
		    </div>
		  </div>
		  <div class="form-group">
		  	<!--偏移几格-->
		    <div class="col-sm-offset-2 col-sm-10">
		      <div class="checkbox">
		        <label>
		          <input type="checkbox"> Remember me
		        </label>
		      </div>
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-default">Sign in</button>
		    </div>
		  </div>
		</form>
		<hr style="border: 1px black solid;">
		
		<!--单选复选框实现选择方式，disabled实现不可选择功能->
		<!--多选框-->
		<div class="checkbox">
			<label>
				<input type="checkbox" value="" />
				Option 1 
			</label>
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox" value="" />
				Option 2
			</label>
		</div>
		<div class="checkbox disabled">
			<label>
				<input type="checkbox" value="" disabled/>
				Option 3 disabled
			</label>
		</div>
		<!--单选框 name一致即可实现单一选择-->
		<div class="radio">
			<label>
				<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked/>
				Option 1
			</label>
		</div>
		<div class="radio">
			<label>
				<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />
				Option 2
			</label>
		</div>
		<div class="radio disabled">
			<label>
				<input type="radio" name="optionsRadios" id="optionRadios3" value="option3" disabled/>
				Option 3
			</label>
		</div>
		<!--内联 一行实现选框架构之多选框-->
		<label class="checkbox-inline">
			<input type="checkbox" id="inline-checkbox1" value="inline-option1" />option 1
		</label>
		<label class="checkbox-inline">
			<input type="checkbox" id="inline-checkbox2" value="inline-option2" />option 2
		</label>
		<label class="checkbox-inline">
			<input type="checkbox" id="inline-checkbox3" value="inline-option3" />option 3
		</label>
		<br>
		<!--内联 一行实现选框架构之单选框-->
		<label class="radio-inline">
			<input type="radio" name="inline-radio" id="inline-radio1" value="inline-option1" />option 1
		</label>
		<label class="radio-inline">
			<input type="radio" name="inline-radio" id="inline-radio2" value="inline-option2" />option 2
		</label>
		<label class="radio-inline">
			<input type="radio" name="inline-radio" id="inline-radio3" value="inline-option3" />option 3
		</label>
		<br>
		<div class="checkbox"><!--aria-label 告诉辅助设备 什么功能 例如button的close属性-->
		  <label>
		    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="option1">
		  </label>
		</div>
		<div class="radio">
		  <label>
		    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="option1">
		  </label>
		</div>
		
		<!--下拉列表-->
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<!--下拉列表默认显示option初始-->
		<select multiple class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		
		<!--静态控件-->
		<form class="form-horizontal">
		  <div class="form-group">
		    <label class="col-sm-2 control-label">Email</label>
		    <div class="col-sm-10">
		    	<!--实现将文本内容与Label放置在同一行，重要显示就是没有control框-->
		     	<!--实现静态变量话，可以实现如块级元素、行级元素等能在一行-->
		     <p class="form-control-static">email@example.com</p>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
		    </div>
		  </div>
		</form>
		
		<!--输入框禁用状态-->
		<input type="text"  id="disabledtext" placeholder="i am disabled" disabled/>
		
		<!--输入框只读状态-->
		<input type="text" id="input_read_only" placeholder="我是只读状态下的文字 与 禁用 还是有样式方面的区别的" readonly/>
		
		<div class="has-success form-group">
			<label for="inputSuccess1" class="control-label">InputSuccess</label>
			<input type="text" class="form-control" id="inputSuccess1" />
			<span class="help-block">
				我是一段帮助语句
			</span>
		</div>
		<div class="form-group has-warning">
			<label for="inputWarning1" class="control-label">InputWarning</label>
			<input type="text" class="form-control" id="inputWarning1"  />
		</div>
		<div class="form-group has-error">
			<label for="inputError1" class="control-label">InputError</label>
			<input type="text" class="form-control" id="inputError1"  />
		</div>
		<div class="has-success">
	  <div class="checkbox">
	    <label>
	      <input type="checkbox" id="checkboxSuccess" value="option1" >
	      Checkbox with success
	    </label>
	  </div>
		</div>
	<div class="has-warning">
	  <div class="checkbox">
	    <label>
	      <input type="checkbox" id="checkboxWarning" value="option1">
	      Checkbox with warning
	    </label>
	  </div>
	</div>
	<div class="has-error">
	  <div class="checkbox">
	    <label>
	      <input type="checkbox" id="checkboxError" value="option1">
	      Checkbox with error
	    </label>
	  </div>
	</div>

	<br><br>
	<!--输入框有前缀 + 对错标识显示  即添加额外的图标-->
	<!--同一行 input放置在label里面 feedback 用于前后有图标的显示-->
	<div class="form-group has-success has-feedback">
	  <label class="control-label" for="inputSuccess2">Input with success</label>
	  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
	  <!--hidden用于对辅助设备的设置,防止出现混淆文本-->
	  <!--图标种类需要引入 ✔和×等有相应对应图标-->
	  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	  <span id="inputSuccess2Status" class="sr-only">(success)</span>
	</div>
	<div class="form-group has-warning has-feedback">
	  <label class="control-label" for="inputWarning2">Input with warning</label>
	  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
	  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
	  <span id="inputWarning2Status" class="sr-only">(warning)</span>
	</div>
	<div class="form-group has-error has-feedback">
	  <label class="control-label" for="inputError2">Input with error</label>
	  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
	  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
	  <span id="inputError2Status" class="sr-only">(error)</span>
	</div>
	<div class="form-group has-success has-feedback">
	  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
	  <div class="input-group">
	    <span class="input-group-addon">@</span>
	    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
	  </div>
	  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	  <!--sr-only 依旧是让span内容不被显示-->
	  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
	</div>
	<!--如果要实现在同一行，form表单 horizontal 属性即可 from 下多个div皆为horizontal属性-->
	
	<!--隐藏label内容的feedback标签-->
	<div class="form-group has-success has-feedback">
	  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
	  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
	  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	  <span id="inputSuccess5Status" class="sr-only">(success)</span>
	</div>
	<div class="form-group has-success has-feedback">
	  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
	  <div class="input-group">
	    <span class="input-group-addon">@</span>
	    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
	  </div>
	  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
	</div>
	
	<!--控件内容大小-->
	<input class="form-control input-lg" type="text" placeholder="text - input-lg"/><!--大-->
	<input class="form-control input-sm" type="text" placeholder="text - input-sm"/><!--小-->
	<input class="form-control"         type="text" placeholder="text - placeholder"/><!--默认-->
	
	<!--div组件实现集体样式一致化-->
	<form class="form-horizontal">
	  <div class="form-group form-group-lg">
	    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
	    <div class="col-sm-10">
	      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
	    </div>
	  </div>
	  <div class="form-group form-group-sm">
	    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
	    <div class="col-sm-10">
	      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
	    </div>
	  </div>
	</form>
	
	<!--列尺寸设置-->
	<div class="row">
	  <div class="col-xs-2">
	    <input type="text" class="form-control" placeholder=".col-xs-2">
	  </div>
	  <div class="col-xs-3">
	    <input type="text" class="form-control" placeholder=".col-xs-3">
	  </div>
	  <div class="col-xs-4">
	    <input type="text" class="form-control" placeholder=".col-xs-4">
	  </div>
	</div>
	
	
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
  <!--
    Bootstrap 自带的很多逻辑 + 样式 都为如a的下划线等常用标签做了最好的配置
  -->
  </body>
</html>